<template>
  <div class="all" @click="handleli">
    <div class="head">
      <div v-show="sc" class="back" @click="back">
        <img src="./Common/images/back.png" alt="">
        <span>返回</span>
      </div>
      vue项目
    </div>
    <div class="content">
      <transition name="content" tag="div">
        <router-view :class="{act:flag}"></router-view>
      </transition>
    </div>
    <ul class="tabbar" @click="handleli">
      <li>
        <router-link to="/">
          <img class="img01" src="./Common/images/home.png" alt="">
          <img class="img02" src="./Common/images/home2.png" alt="">
          <span>首页</span>
        </router-link>
      </li>
      <li>
        <router-link to="/vip">
          <img class="img01" src="./Common/images/vip.png" alt="">
          <img class="img02" src="./Common/images/vip2.png" alt="">
          <span>会员</span>
        </router-link>
      </li>
      <li>
        <router-link to="/cart">
          <img class="img01" src="./Common/images/cart.png" alt="">
          <img class="img02" src="./Common/images/cart2.png" alt="">
          <span>购物车</span>
        </router-link>
      </li>
      <li>
        <router-link to="/seach">
          <img class="img01" src="./Common/images/seach.png" alt="">
          <img class="img02" src="./Common/images/seach2.png" alt="">
          <span>搜索</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      flag: true,
      sc: false
    }
  },
  methods: {
    handleli () {
      this.flag = false
    },
    back () {
      this.$router.go(-1)
    }
  },
  created () {

  },
  watch: {
    '$route.path' (newval) {
      if (newval !== '/' && newval !== '/vip' && newval !== '/cart' && newval !== '/seach') {
        this.sc = true
      } else {
        this.sc = false
      }
    }
  }
}
</script>

<style>
.mint-header.is-fixed{
  width: 7.5rem;
  height: 0.6rem;
  margin: auto;
}
.all{
  width: 7.5rem;
  height: auto;
  overflow-x: hidden;
  position: relative;
  margin: auto;
}
body{
  background-color: #eeeeee !important;
}
.content-enter{
  transform: translateX(7.5rem);
  position: absolute;
}
.content-leave-to{
  transform: translateX(-7.5rem);
  position: absolute;
}
.content-enter-to,.content-leave{
  transform: translateX(0);
}
.content-enter-active,.content-leave-active{
  transition: transform .3s ease-in-out;
}
.act{
  transition: transform 0s !important;
}
.tabbar{
  width: 7.5rem;
  height: 1rem;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  left: 50%;
  margin-left: -3.75rem;
}
.tabbar li{
  width: 1.875rem;
  height: 0.8rem;
  padding: 0.1rem 0;
}
.tabbar li a{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.tabbar li a img{
  display: block;
  width: 0.4rem;
}
.tabbar li a span{
  width: 100%;
  text-align: center;
  color: #222222;
  font-size: 0.28rem;
}
.tabbar li a .img02{
  display: none;
}
.content{
  width: 7.5rem;
  /* height: 10rem; */
  padding-top: 0.8rem;
  margin: auto;
  position: relative;
}

.router-link-exact-active span{
  color: #1296db !important;
}
.router-link-exact-active .img02{
  display: block !important;
}
.router-link-exact-active .img01{
  display: none;
}
.head{
  width: 100%;
  width: 7.5rem;
  height: 0.8rem;
  background-color: #1296db;
  position: fixed;
  top: 0;
  left: 0;
  font-size: 0.26rem;
  color: #ffffff;
  text-align: center;
  line-height: 0.8rem;
  z-index: 10;
}
.back{
  width: 1rem;
  height: 100%;
  position: absolute;
  padding: 0rem 0.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.back img{
  width: 0.3rem;
}
.back span{
  display: block;
  font-size: 0.28rem;
}
</style>
